<template>
	<div>
		<h1>房间列表</h1>
    <!-- 房间页面搜索框 -->
    <Row>
      <Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
        <Input class="w-100" v-model="searchKey.roomname" placeholder="请输入检索房间名" />
      </Col>

    </Row>
    <!-- 房间页面查询按钮 -->

      <div class="d-flex justify-content-between align-items-center ">
        <Button class="m-1" type="error" shape="circle" @click="newRoom" icon="md-add">新增</Button>
        <Button class="m-1" type="primary" shape="circle" @click="searchRoom" icon="ios-search">查询</Button>
      </div>

    <!-- 房间列表表格信息部分 -->
    <div>
      <div class="mt-1 d-none d-xl-block">
        <Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
          <template slot-scope="{ row, index }" slot="roomAFlg">
            <i-switch>
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-switch>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px"
                    @click="show(row.roomid)">详细</Button>
            <Button type="error" size="small" @click="remove(row.roomid)">删除</Button>
          </template>
        </Table>
      </div>
    </div>
    <div>
      <Page class="text-right mt-3" :page-size="tableInfo.pageSize" @on-change="pageSearch"
            :total="tableInfo.total" />
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        searchKey: {
          roomname: ""
        },
        pageInfo: {
          current: 1,
          total: 0,
          size: 10,
        },
        tableInfo: {
          columnInfo: [
            {
              title: "门店id",
              key:"storeid"
            },
            {
              title: "房间id",
              key:"roomid"
            },
            {
              title: "房间名",
              key:"roomname"
            },
            {
              title: "描述",
              key: "ms",
            },
            {
              title: "房间单价/分钟",
              key: "price",
            },
            {
              title: "房间状态",
              slot: "roomAFlg",
            },
            {
              title: "操作",
              slot: 'action',
              width: 150
            }
          ],
          data: []
        }

      };
		},
		props: {
			params: {
				type: Object,
				default: undefined,
			}
		},
		methods: {
      init: function() {
        this.tableInfo.currentPage = 0;
        this.search();
      },

      newRoom: function() {
        this.$router.push({
          path: "/fj/new"
        })
      },

      // newRoom: function() {
      //   this.$router.detail.open({
      //     name: "fj_new",
      //   });
      // },

      // show: function(roomId) {
      //   this.$router.detail.open({
      //     name: "fj_detail",
      //     params: {
      //       roomId
      //     }
      //   });
      // },

      show: function(roomId) {
        this.$router.push({
          path: "/fj/detail?roomId=" + roomId
        })
      },

      remove: function(roomId) {

        this.message.confirm({
          title: "删除提示",
          content: "即将删除，确定吗？",
          onOk: () => {
            this.http.delete({
              url: "/fj/info",
              param: {
                roomId
              }
            }).then(data => {

              this.search();
            });
          },
          onCancel: () => {
            this.message.info('操作已取消');
          }
        });
      },
      searchRoom: function() {
        this.tableInfo.currentPage = 1;
        this.search();
      },
      search: function() {
        this.http.get({
          url: "/fj/page",
          param: {
            current: this.tableInfo.currentPage,
            roomname: this.searchKey,
          }
        }).then(data => {
          this.tableInfo.currentPage = data.current;
          this.tableInfo.total = data.total;
          this.tableInfo.pageSize = data.size;
          this.tableInfo.data = data.records;
        });
      },
      pageSearch: function(changedPage) {
        this.tableInfo.currentPage = changedPage;
        this.search();
      }
    },
    created: function() {
      this.init();
    }


	}
</script>

<style>
</style>
